<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet/less" href="../css/city.less">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div data-ride="page">
    <div data-role="header" >
        <div class="CityHeader">
            <span  class="NavLeft">成都</span>
            <span  class="NavRight" >重新定位<span class="positionPhoto"><img src="../images/position.png"></span></span>
        </div>
    </div>
    <div role="main"  >
        <div class="myContent">
            <div class="MyInput">
                <input type="text" placeholder="请输入您要搜索的城市" id="search" name="search"><label id="closeDiv">取消</label>
            </div>
            <br>
            <div class="searchCity">
                <div class="searchStrat">
                    <div class="hotCity">
                        <div class="hotCityTop">
                            <h3>热门城市</h3>
                            <ul>
                                <li>北京</li>
                                <li>上海</li>
                                <li>成都</li>
                                <li>重庆</li>
                            </ul>
                        </div>
                        <div class="hotCityButtom">
                            <h3>热门城市</h3>
                            <ul class="hotCityList">
                                <li><a>北京</a><span id="hotCityListcha"><i class="fa fa-times" aria-hidden="true"></i></span></li>
                                <!--<li>上海<span><i class="fa fa-times" aria-hidden="true"></i></span></li>-->
                                <!--<li>成都<span><i class="fa fa-times" aria-hidden="true"></i></span></li>-->
                                <!--<li>重庆<span><i class="fa fa-times" aria-hidden="true"></i></span></li>-->
                            </ul>
                        </div>
                    </div>
                 </div>
                <div class="blurSreach">
                </div>
            </div>
            <div class="citybox"><br>
                <ol>
                    <li id="city-A">
                        <p class="cf">
                            <span class="label">A</span>
                            <span><a href="#">安徽省</a><a href="#">澳门</a></span>
                        </p>
                    </li>
                    <li id="city-B">
                        <p class="cf">
                            <span class="label">B</span>
                            <span><a href="#">北京</a></span>
                        </p>
                    </li>
                    <li id="city-F">
                        <p class="cf">
                            <span class="label">F</span>
                            <span><a href="#">福建省</a></span>
                        </p>
                    </li>
                    <li id="city-G">
                        <p class="cf">
                            <span class="label">G</span>
                            <span><a href="#">广东省</a><a href="#">贵州省</a><a href="#">广西省</a></span>
                        </p>
                    </li>
                    <li id="city-H">
                        <p class="cf">
                            <span class="label">H</span>
                            <span>
                                <a href="#">海南省</a>
                                <a href="#">河北省</a>
                                <a href="#">河南省</a>
                                <a href="#">黑龙江省</a>
                                <a href="#">湖北省</a>
                                <a href="#">湖南省</a>
                            </span>
                        </p>
                    </li>
                    <li id="city-J">
                        <p class="cf">
                            <span class="label">J</span>
                            <span>
                                <a href="#">吉林省</a>
                                <a href="#">江苏省</a>
                                <a href="#">江西省</a>
                            </span>
                        </p>
                    </li>
                    <li id="city-L">
                        <p class="cf">
                            <span class="label">L</span>
                            <span>
                                <a href="#">辽宁省</a>
                            </span>
                        </p>
                    </li>
                    <li id="city-N">
                        <p class="cf">
                            <span class="label">N</span>
                            <span>
                                <a href="#">内蒙古</a>
                                <a href="#">宁夏省</a>
                            </span>
                        </p>
                    </li>
                    <li id="city-Q">
                        <p class="cf">
                            <span class="label">Q</span>
                            <span><a href="#">青海省</a></span>
                        </p>
                    </li>
                    <li id="city-S">
                        <p class="cf">
                            <span class="label">S</span>
                            <span>
                                <a href="#">山东省</a>
                                <a href="#">山西省</a>
                                <a href="#">陕西省</a>
                                 <a href="#">上海</a>
                                <a href="#">四川省</a>
                            </span>
                        </p>
                    </li>
                    <li id="city-T">
                        <p class="cf">
                            <span class="label">T</span>
                            <span>
                                <a href="#">台湾</a>
                                <a href="#">天津</a>
                            </span>
                        </p>
                    </li>
                    <li id="city-X">
                        <p class="cf">
                            <span class="label">X</span>
                            <span><a href="#">西藏</a>
                            <a href="#">香港</a>
                            <a href="#"></a></span>
                        </p>
                    </li>
                    <li id="city-Y">
                        <p class="cf">
                            <span class="label">Y</span>
                            <span><a href="#">云南省</a></span>
                        </p>
                    </li>
                    <li id="city-Z">
                        <p class="cf">
                            <span class="label">Z</span>
                            <span><a href="#">云南</a></span>
                        </p>
                    </li>
                </ol>
                <!--<ol class="myIndex">-->
                    <!--<li><a href="#">A</a></li>-->
                    <!--<li><a href="#">B</a></li>-->
                    <!--<li><a href="#">F</a></li>-->
                    <!--<li><a href="#">G</a></li>-->
                    <!--<li><a href="#">H</a></li>-->
                    <!--<li><a href="#">J</a></li>-->
                    <!--<li><a href="#">L</a></li>-->
                    <!--<li><a href="#">N</a></li>-->
                    <!--<li><a href="#">Q</a></li>-->
                    <!--<li><a href="#">S</a></li>-->
                    <!--<li><a href="#">T</a></li>-->
                    <!--<li><a href="#">X</a></li>-->
                    <!--<li><a href="#">Y</a></li>-->
                    <!--<li><a href="#">Z</a></li>-->
                <!--</ol>-->
            </div>
            <div class="detailedListBox">
                <div class="detailedList">
                    <h3>安徽省<span id="cancel">取消</span></h3>
                    <div class="detailedListCity">
                        <ul>
                            <li>安庆市</li>
                            <li>蚌埠市</li>
                            <li>亳州市</li>
                            <li>芜湖市</li>
                            <li>黄山市</li>
                            <li>马鞍山市</li>
                            <li>铜陵市</li>
                            <li>阜阳市</li>
                            <li>宣城市</li>
                            <li>宿州市</li>
                            <li>六安市</li>
                            <li>池州市</li>
                            <li>淮南市</li>
                            <li>合肥市</li>
                            <li>滁州市</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="loading">
                <div class="loadingBox">
                    <span class="loadIcon"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                    <span class="sr-only loadingTitle">正在定位</span></span>
                </div>
            </div>
        </div>
    </div>
    <div data-role="footer" >
        <div data-role="navbar">
            <ul class="footerNav">
                <li><a href="#" ><i class="fa fa-chevron-up" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </div>
</div>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="../js/less.js"></script>
<script type="text/javascript" src="../js/city.js"></script>
<script type="text/javascript">
//    $(function (){
//        $(".citybox li").hover(function(){
//            $(this).addClass('hover');
//        }, function(){
//            $(this).removeClass('hover');
//        });
//    });
</script>
</body>
</html>